<template>
    <div class="menuDraw">
        <el-drawer size="500" :title="drawerTitle" :visible.sync="drawer" direction="rtl">
            <div class="drawBox">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" :disabled="drawDisable">

                    <el-form-item label="菜单类型:" prop="menuType" label-width="113px">
                        <el-radio-group v-model="ruleForm.menuType" @change="changeRadio">
                            <el-radio label="一级菜单"></el-radio>
                            <el-radio label="子菜单"></el-radio>
                            <el-radio label="按钮/权限"></el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item v-if="menuState==0||menuState==1" label="菜单名称:" prop="menuName" label-width="113px">
                        <el-input v-model="ruleForm.menuName" placeholder="请输入菜单名称"></el-input>
                    </el-form-item>


                    <el-form-item v-if="menuState==2" label="按钮/权限:" prop="menuName" label-width="113px">
                        <el-input v-model="ruleForm.menuName" placeholder="请输入菜单名称"></el-input>
                    </el-form-item>

                    <el-form-item v-if="menuState==1||menuState==2" label="上级菜单:" prop="frontMenu" label-width="113px">
                        <el-select v-model="ruleForm.frontMenu" placeholder="请选择" style="width: 16rem" clearable>
                            <el-option :value="treeDataValue" style="height: auto">
                                <el-tree :data="tableData" default-expand-all node-key="id" :props="defaultProps"
                                    @node-click="handleNodeClick" />
                            </el-option>

                        </el-select>
                    </el-form-item>



                    <el-form-item label="菜单路径:" prop="menuRoute" label-width="113px">
                        <el-input v-model="ruleForm.menuRoute" placeholder="请输入菜单路径"></el-input>
                    </el-form-item>
                    <el-form-item v-if="menuState==0||menuState==1" label="前端组件:" prop="frontComponent"
                        label-width="113px">
                        <el-input v-model="ruleForm.frontComponent" placeholder="请输入前端组件"></el-input>
                    </el-form-item>


                    <el-form-item v-if="menuState==0" label="默认跳转地址:" prop="defaultRouterPush" label-width="113px">
                        <el-input v-model="ruleForm.defaultRouterPush" placeholder="请输入路由参数 redirect"></el-input>
                    </el-form-item>

                    <!-- <el-form-item v-if="menuState==0||menuState==1" label="菜单图标:" prop="menuicon" label-width="113px">
                        <el-input v-model="ruleForm.menuicon" placeholder="点击选择图标">
                            <el-button slot="append" icon="el-icon-setting"></el-button>
                        </el-input>
                    </el-form-item> -->
                    <el-form-item v-if="menuState==0||menuState==1" label="排序:" prop="menuOrder" label-width="113px">
                        <el-input-number v-model="ruleForm.menuOrder" controls-position="right" :min="1" :max="10">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item v-if="menuState==0||menuState==1" label="是否路由菜单:" prop="routerMenu"
                        label-width="113px">
                        <el-switch v-model="ruleForm.routerMenu"></el-switch>
                    </el-form-item>
                    <el-form-item v-if="menuState==0||menuState==1" label="隐藏路由:" prop="hideRouter" label-width="113px">
                        <el-switch v-model="ruleForm.hideRouter"></el-switch>
                    </el-form-item>
                    <el-form-item v-if="menuState==0||menuState==1" label="是否缓存路由:" prop="storeRouter"
                        label-width="113px">
                        <el-switch v-model="ruleForm.storeRouter"></el-switch>
                    </el-form-item>
                    <el-form-item v-if="menuState==0||menuState==1" label="聚合路由:" prop="combineRouter"
                        label-width="113px">
                        <el-switch v-model="ruleForm.combineRouter"></el-switch>
                    </el-form-item>
                    <el-form-item v-if="menuState==0||menuState==1" label="打开方式:" prop="openWay" label-width="113px">
                        <el-switch v-model="ruleForm.openWay"></el-switch>
                    </el-form-item>

                    <el-form-item v-if="menuState==2" label="授权标识" prop="authorizedId" label-width="113px">
                        <el-input v-model="ruleForm.authorizedId" placeholder="请输入授权标识，如：userlist"></el-input>
                    </el-form-item>

                    <el-form-item v-if="menuState==2" label="授权策略" prop="authorizedStrategy" label-width="113px">
                        <div>
                            <el-radio v-model="ruleForm.authorizedStrategy" label="1">可见/可访问(授权后可见/可访问)</el-radio>
                        </div>
                        <div>
                            <el-radio v-model="ruleForm.authorizedStrategy" label="2">可编辑(未授权时禁用)</el-radio>

                        </div>
                    </el-form-item>
                    <el-form-item v-if="menuState==2" label="状态" prop="authorizedStrategy" label-width="113px">

                        <el-radio v-model="ruleForm.status" label="0">无效</el-radio>

                        <el-radio v-model="ruleForm.status" label="1">有效</el-radio>


                    </el-form-item>




                    <div class="buttomDraw">
                        <el-button>关闭</el-button>
                        <el-button type="primary" @click="submit">确定</el-button>
                    </div>

                </el-form>
            </div>

        </el-drawer>

    </div>
</template>

<script>
import { addMenuTableData, editMenuData } from "@/api/api-wwx/sysMenu"
export default {
    props: {
        drawerTitle: {
            type: String,
            default: () => {
                return '';
            },
        },
        tableData: {
            type: Array,
            default: () => {
                return [];
            },
        }
    },
    data() {
        return {
            drawDisable: false,
            treeDataValue: '',
            menuState: 0,
            drawer: false,
            ruleForm: {
                menuType: '一级菜单',
                menuName: '',
                menuRoute: '',
                frontComponent: '',
                defaultRouterPush: '',
                menuicon: '',
                menuOrder: 1,
                routerMenu: true,
                hideRouter: false,
                storeRouter: false,
                combineRouter: false,
                openWay: false,
                frontMenu: '',//上级菜单
                button: "",
                authorizedId: '',
                authorizedStrategy: '1',//授权策略
                status: '0',
                permsType: '1'

            },
            rules: {
                menuName: [
                    { required: true, message: "请输入菜单标题!", trigger: "change" }
                ],
                menuRoute: [
                    { required: true, message: "请输入菜单路径！", trigger: "change" }
                ],
                frontComponent: [
                    { required: true, message: "请输入前端组件！", trigger: "change" }
                ],
                frontMenu: [
                    { required: true, message: "请选择上级菜单", trigger: "change" }
                ],
                button: [
                    { required: true, message: "请选择菜单标题！", trigger: "change" }
                ],
            },
            selectTree: [
                {
                    id: 1,
                    name: "一级 1",
                    children: [
                        {
                            id: 4,
                            name: "一级 1-1",
                        }
                    ]
                },
                {
                    id: 2,
                    name: "一级 2",
                    children: [
                        {
                            id: 5,
                            name: "二级 2-1",
                        },
                        {
                            id: 6,
                            name: "二级 2-2",
                        }
                    ]
                },
                {
                    id: 3,
                    name: "一级 3",
                    children: [
                        {
                            id: 7,
                            name: "二级 3-1",
                        },
                        {
                            id: 8,
                            name: "二级 3-2",
                        }
                    ]
                }
            ],
            defaultProps: {
                children: "children",
                label: "name",
            },
            chooseId: "",
            addOrEdit: '',//1新增  2编辑
            idXL: '',
            frontMenuXX: '',
        }
    },
    methods: {
        // 禁止编辑
        beDrawDisable() {
            this.drawDisable = true
        },
        openDrawDisable() {
            this.drawDisable = false
        },
        async draweropen(scope) {
            let _self = this;
            setTimeout(function () {
                if (scope) {

                    console.log('编辑1');
                    _self.idXL = scope.row.id
                    if (_self.drawerTitle == '编辑') {

                        _self.addOrEdit = 2
                        let menuStateA = 0
                        let menuType = '一级菜单'
                        if (!scope.row.isLeaf) {
                            menuStateA = 0
                            menuType = '一级菜单'
                        } else if (scope.row.menuType == '菜单') {
                            menuStateA = 1
                            menuType = '子菜单'
                        } else {
                            menuStateA = 2
                            menuType = '按钮/权限'
                        }
                        for (let i of _self.tableData) {
                            _self.findParentTitle(i, scope)
                        }
                        console.log('编辑2');

                         _self.$nextTick(() => {
                            _self.ruleForm.menuType = menuType
                            _self.menuState = menuStateA
                            _self.ruleForm.menuName = scope.row.name
                            _self.ruleForm.menuRoute = scope.row.url
                            _self.ruleForm.frontComponent = scope.row.component
                            _self.ruleForm.defaultRouterPush = scope.row.redirect
                            _self.ruleForm.menuicon = scope.row.menuName
                            _self.ruleForm.menuOrder = scope.row.sortNo
                            _self.ruleForm.routerMenu = scope.row.route
                            _self.ruleForm.hideRouter = scope.row.hidden
                            _self.ruleForm.storeRouter = scope.row.keepAlive
                            _self.ruleForm.combineRouter = scope.row.alwaysShow
                            _self.ruleForm.openWay = scope.row.internalOrExternal
                        })

                        // 
                        _self.ruleForm.frontMenu = scope.row.menuName
                        //
                        _self.ruleForm.status = scope.row.status
                        _self.ruleForm.authorizedStrategy = scope.row.permsType
                        console.log('编辑');
                    } else {
                        console.log('添加子集');
                        console.log(scope.row);
                        _self.addOrEdit = 1
                        _self.menuState = 1
                        _self.ruleForm.menuType = '子菜单'
                        if (_self.$refs['ruleForm']) {
                            console.log(_self.$refs['ruleForm']);
                            _self.$refs['ruleForm'].resetFields();
                        }
                        _self.ruleForm.frontMenu = scope.row.title
                        console.log(_self.ruleForm.frontMenu);
                    }
                    // 新增
                } else {
                    if (_self.drawerTitle == '新增') {
                        _self.addOrEdit = 1
                        _self.menuState = 0
                        if (_self.$refs['ruleForm']) {
                            console.log(_self.$refs['ruleForm']);
                            _self.$refs['ruleForm'].resetFields();
                        }
                    }
                }
                _self.drawer = true;
            }, 0);
            // 编辑


        },
        changeRadio(val) {
            console.log(val);
            if (val == '子菜单') {
                this.menuState = 1
            } else if (val == '一级菜单') {
                this.menuState = 0
            } else {
                this.menuState = 2
            }
        },

        // select单选
        handleNodeClick(data, node, nodeData) {
            // select 单选
            this.treeDataValue = data
            this.ruleForm.frontMenu = data.name
            console.log(node);
            this.chooseId = node.data.id
            console.log(this.chooseId);
        },

        // 确定
        submit() {
            this.addMenuTableDataSearch()
        },

        // 新增和编辑
        addMenuTableDataSearch() {
            let _self = this
            let data = {
                id: '',
                alwaysShow: _self.ruleForm.combineRouter,
                component: _self.ruleForm.frontComponent,
                hidden: _self.ruleForm.hideRouter,
                icon: _self.ruleForm.icon,
                internalOrExternal: _self.ruleForm.openWay,
                keepAlive: _self.ruleForm.storeRouter,
                menuType: _self.menuState,
                name: _self.ruleForm.menuName.trim(),
                permsType: _self.ruleForm.authorizedStrategy,
                route: _self.ruleForm.routerMenu,
                sortNo: _self.ruleForm.menuOrder,
                status: _self.ruleForm.status,
                url: _self.ruleForm.menuRoute,
                parentId: _self.chooseId,
                perms: _self.ruleForm.authorizedId,
                redirect: _self.ruleForm.defaultRouterPush,
                icon: _self.ruleForm.menuicon,
            }
            // 新增
            if (_self.addOrEdit == 1) {
                console.log(_self.idXL);
                console.log(data);
                if (_self.drawerTitle == "添加子菜单") {
                    data.parentId = _self.idXL
                    console.log(data);
                }
                addMenuTableData(data).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        _self.drawer = false

                        _self.$emit('menuTableDataSearch');
                        _self.$refs['ruleForm'].resetFields()
                    }
                })
                // 编辑
            } else {
                console.log(_self.chooseId);
                data.id = _self.idXL
                console.log(data);
                editMenuData(data).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        _self.$emit('menuTableDataSearch');
                        _self.drawer = false
                        _self.chooseId = ''
                        _self.$refs['ruleForm'].resetFields()
                    }
                })
            }
        },

        // 递归
        // data是循环出来的tableData每一项
        findParentTitle(data, scope) {
            if (data.children) {
                data.children.forEach((item) => {
                    if (item.id == scope.row.id) {
                        console.log('已找到');
                        this.ruleForm.frontMenu = data.title
                        this.chooseId = data.id
                        console.log(this.ruleForm.frontMenu);
                    } else {
                        this.findParentTitle(item, scope)
                    }

                });
            }

        }

    }
}
</script>

<style>
.menuDraw .el-drawer {
    width: 692px
}

.menuDraw .el-drawer__body {
    border-top: 1px solid rgb(206, 202, 202);
}

.menuDraw .drawBox {
    margin: 30px;
    border: 1px solid rgb(206, 202, 202);
    padding: 20px
}

.menuDraw .buttomDraw {
    position: fixed;
    bottom: 40px;
    right: 40px;
}
</style>